<template>
    <div id="catagory">
        <div class="search" @click="toSearch">
            <div class="head">
                <span class="icon"></span>
                <span>商品搜索,共239款好物</span>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <div
                    class="name"
                    v-for="(item,index) in listData"
                    :key="index"
                    @click="currentItem(item.id,index)"
                    :class="[index == currentIndex ? 'active':'']"
                >{{item.name}}</div>
            </div>
            <div class="right">
                <div class="banner">
                    <img :src="detailData.banner_url" alt />
                </div>
                <div class="title">
                    <p>{{detailData.name}}分类</p>
                </div>
                <div class="bottom">
                    <router-link
                        tag="div"
                        class="item"
                        v-for="(item,index) in detailData.subList"
                        :key="index"
                        :to="`/category/categorylist?id=${item.id}`"
                    >
                        <img :src="item.wap_banner_url" alt />
                        <p>{{item.name}}</p>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { indexaction, currentaction } from "@/api/category";
export default {
    data() {
        return {
            id: 1005000,
            listData: [],
            detailData: {},
            currentIndex: 0,
        };
    },
    computed: {},
    created() {},
    mounted() {
        //列表数据
        this.getListData();
        //右侧数据
        this.currentItem(this.id, this.currentIndex);
    },
    methods: {
        getListData() {
            indexaction().then((res) => {
                console.log(res);
                this.listData = res.categoryList;
                console.log(this.listData);
            });
        },
        currentItem(id, index) {
            // console.log(id,index);
            this.currentIndex = index;
            currentaction({
                id: id,
            }).then((res) => {
                console.log(res);
                this.detailData = res.data.currentOne;
                console.log(this.detailData);
            });
        },
        async toSearch(){
            this.$router.push('/pages/search')
        }
    },
};
</script>

<style scoped lang="scss">
#catagory {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding-bottom: 1.333333rem;
    .search {
        height: 1.17333rem;
        padding: 0 0.4rem;
        background: #fff;
        display: flex;
        align-items: center;
        border-bottom: 0.01333rem solid #ededed;
        .head {
            width: 9.2rem;
            height: 0.74667rem;
            background: #ededed;
            border-radius: 0.10667rem;
            display: flex;
            align-items: center;
            justify-content: center;
            .icon {
                background: url("../../assets/images/search.png") no-repeat 50%;
                background-size: 100%;
                width: 0.37333rem;
                height: 0.37333rem;
                margin-right: 0.13333rem;
            }
        }
    }
    .content {
        flex: 1;
        background: #fff;
        display: flex;
        overflow: auto;
        .left {
            width: 2.16rem;
            height: 100%;
            text-align: center;
            .name {
                text-align: center;
                line-height: 1.2rem;
                width: 2.16rem;
                height: 1.2rem;
                color: #333;
                font-size: 0.37333rem;
                border-left: 0.08rem solid #fff;
            }
            .active {
                color: #ab2b2b;
                font-size: 0.48rem;
                border-left: 0.08rem solid #ab2b2b;
            }
        }
        .right {
            border-left: 0.01333rem solid #fafafa;
            flex: 1;
            height: 100%;
            padding: 0 0.4rem 0 0.4rem;
            .banner {
                width: 100%;
                height: 2.96rem;
                margin-top: 0.26667rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .title {
                text-align: center;
                padding: 0.66667rem 0;
                p {
                    font-size: 0.32rem;
                    color: #333;
                    margin: 0;
                }
            }
            .bottom {
                display: flex;
                flex-wrap: wrap;
                .item {
                    width: 33.33%;
                    text-align: center;
                    margin-bottom: 0.26667rem;
                    img {
                        height: 1.92rem;
                        width: 1.92rem;
                        display: block;
                        margin: 0 auto;
                    }
                    p {
                        margin: 0;
                    }
                }
            }
        }
    }
}
</style>